<!--
 * @Date: 2021-10-27 09:15:50
 * @LastEditors: 邓春宜
 * @Desc: 圆角带刻度仪表图样式1
 * @LastEditTime: 2021-11-09 10:20:29
 * @FilePath: \tianjushi-kanban\src\components\charts\DoubleCircle1.vue
-->
<template>
<div :style="[{ width: width, height: height,overflow:'hidden' }]">
  <div
    ref="echartref"
    :style="[{ width: width, height: height }, _resetChartStyle]"
  ></div>
</div>
</template>

<script>
import * as echarts from "echarts";

import { onMounted,toRefs, ref,reactive,watch,computed } from 'vue';
import { resetChartStyle, showLoading } from "@/core/tools/common";
export default {
  
  props: {
      title: {
      type: String,
      default: "100%",
    },
      width: {
      type: String,
      default: "100%",
    },
     height: {
      type: String,
      default: "100%",
    },
    chartdata:{
      type: Array,
      default: [{
        value:40,
        total:100,
        title:"时间",
        color:["#1BC85E","#00A0E9"] 
      },{
        value:70,
        total:100,
        title:"完成率",
        color:["#fccb05","#f5804d"]  
      }],
    },
    fontSize:{
      default:26,
      type:Number
    }
  },
  setup: function (props, context) {
     
    /*监听props*/
    watch(props, (newProps, oldProps) => {
        f_echartInit(state.chartInit)
    }); 
 
    let state = reactive({ 
      echartref: ref(),
      chartInit:""
    }) 

    const _resetChartStyle = computed({
      get() {
        return resetChartStyle()
      } 
    }) 

    const f_echartInit = (chartdom) =>{ 
     
      // 指定图表的配置项和数据
        
      /* ------------------begin------------------ */
     //标示文字 #fccb05, #f5804d)
					const labelTop = {
						normal: {
							color: new echarts.graphic.LinearGradient(
								0, 0, 0, 1, [{ offset: 0, color: props.chartdata[0].color[0] },
								{ offset: 1, color: props.chartdata[0].color[1] }]
							),
							labelLine: {  //标示线
								show: false
							}
						}
					};

          const labelToptime = {
						normal: {
							color: new echarts.graphic.LinearGradient(
								0, 0, 0, 1, [{ offset: 0, color:props.chartdata[1].color[0] },
								{ offset: 1, color: props.chartdata[1].color[1] }]
							),
							labelLine: {  //标示线
								show: false
							}
						}
					};

					//数据位置
					const labelBottom = {
						normal: {
							color: '#496283',
							label: {
								show: false,
								position: 'center'
							},
							labelLine: {
								show: false
							}
						}
					}; 

					//百分比设置
					const labelFromatter = {
						normal: {
							label: {
								show: false,
								position: 'center',
								formatter: '{d}%',
								textStyle: {
									baseline: 'middle',  //垂直对齐方式
									fontSize: props.fontSize,
									color: '#259CFE',
									align: 'center'   //水平对齐方式
								}
							}
						}
					};

					//环形图
				const	option = {
						title: [{
							text: (parseFloat(props.chartdata[0].value)/parseFloat(props.chartdata[0].total)*100).toFixed(1)+"%",
							//subtext: '年完成率',
							left: '40%',
							top: 'middle',
							textAlign: 'center',
							itemGap: 0,
							textStyle: {
								color: '#fccb05',
								fontSize: props.fontSize,
								fontWeight: 'normal'
							}, 
						}, {
							text: (parseFloat(props.chartdata[1].value)/parseFloat(props.chartdata[1].total)*100).toFixed(1)+"%",
							//subtext: '年完成率',
							right: '0',
							top: 'middle',
							textAlign: 'left',
							itemGap: 0,
							textStyle: {
								color: '#259CFE',
								fontSize: props.fontSize,
								fontWeight: 'normal'
							}, 
						}],
						legend: {
							orient: 'vertical',
							right: '0',
							bottom: '10px',
							textStyle: {
								color: '#fff',
								fontSize: props.fontSize- 10
							},
							data: [props.chartdata[0].title, props.chartdata[1].title]
						},
						series: [
							
							{
								type: 'pie',
								center: ['40%', '50%'],
								radius: ['53%', '68%'],
								itemStyle: labelFromatter,
								data: [
									{ name: props.chartdata[0].title, value: props.chartdata[0].value, itemStyle: labelToptime },
									{ name: '', value: props.chartdata[0].total-props.chartdata[0].value, itemStyle: labelBottom }
								]
							},
              {
								type: 'pie',
								center: ['40%', '50%'],
								radius: ['75%', '90%'],
								itemStyle: labelFromatter,
								data: [
									{ name: props.chartdata[1].title, value: props.chartdata[1].value, itemStyle: labelTop },
									{ name: '', value: props.chartdata[1].total-props.chartdata[1].value, itemStyle: labelBottom }
								]
							},
						]
					};

      chartdom.setOption(option);
      chartdom.hideLoading(); 
    }
    //挂载
    onMounted(()=>{ 
      state.chartInit = echarts.init(state.echartref); 
      state.chartInit.showLoading(showLoading());
      f_echartInit(state.chartInit)
    }) 
    return {
      ...toRefs(state), 
      _resetChartStyle
    };  

  }, 
 
};
</script>

<style>
</style>